JavaScript testavimo infrastruktūra: karkaso diegimo vadovas

Šiandieninėje sparčioje programinės įrangos kūrimo aplinkoje jūsų „JavaScript“ kodo kokybės ir patikimumo užtikrinimas yra svarbiausias prioritetas. Gerai apibrėžta testavimo infrastruktūra yra šio tikslo pasiekimo pagrindas. Šis vadovas pateikia išsamią apžvalgą, kaip įdiegti patikimą „JavaScript“ testavimo infrastruktūrą, apimant karkaso pasirinkimą, sąranką, geriausias praktikas ir integraciją su nuolatinės integracijos (CI) sistemomis.

Kodėl „JavaScript“ testavimo infrastruktūra yra svarbi?

Tvirta testavimo infrastruktūra suteikia daug privalumų, įskaitant:

• Ankstyvas klaidų aptikimas: Klaidų nustatymas ir taisymas ankstyvoje kūrimo ciklo stadijoje sumažina išlaidas ir neleidžia problemoms pasiekti gamybinės aplinkos.
• Didesnis pasitikėjimas kodu: Išsamus testavimas suteikia pasitikėjimo jūsų kodo funkcionalumu, leidžia lengviau atlikti kodo pertvarkymą ir priežiūrą.
• Pagerinta kodo kokybė: Testavimas skatina programuotojus rašyti švaresnį, labiau modulinį ir lengviau testuojamą kodą.
• Greitesni kūrimo ciklai: Automatizuotas testavimas leidžia greitai gauti grįžtamąjį ryšį, pagreitina kūrimo ciklus ir didina produktyvumą.
• Sumažinta rizika: Patikima testavimo infrastruktūra sumažina regresijų ir netikėto elgesio atsiradimo riziką.

Testavimo piramidės supratimas

Testavimo piramidė yra naudingas modelis jūsų testavimo pastangoms struktūrizuoti. Ji siūlo, kad turėtumėte turėti daug vienetų testų, vidutinį skaičių integracijos testų ir mažesnį skaičių „end-to-end“ (E2E) testų.

• Vienetų testai: Šie testai skirti atskiriems kodo vienetams, pvz., funkcijoms ar komponentams. Jie turėtų būti greiti, izoliuoti ir lengvai parašomi.
• Integracijos testai: Šie testai patikrina sąveiką tarp skirtingų jūsų sistemos dalių, pvz., modulių ar paslaugų.
• „End-to-End“ (E2E) testai: Šie testai imituoja realius vartotojo scenarijus, testuojant visą programą nuo pradžios iki pabaigos. Paprastai jie yra lėtesni ir sudėtingesni rašyti nei vienetų ar integracijos testai.

Testavimo piramidės laikymasis padeda užtikrinti išsamią aprėptį, kartu sumažinant didelio skaičiaus lėtai veikiančių E2E testų priežiūros išlaidas.

„JavaScript“ testavimo karkaso pasirinkimas

Yra keletas puikių „JavaScript“ testavimo karkasų. Geriausias pasirinkimas priklauso nuo jūsų konkrečių poreikių ir projekto reikalavimų. Štai keleto populiarių variantų apžvalga:

Jest

Jest yra populiarus ir universalus testavimo karkasas, sukurtas „Facebook“. Jis žinomas dėl paprasto naudojimo, išsamaus funkcijų rinkinio ir puikaus našumo. Jest turi integruotą palaikymą:

• Maketavimas (Mocking): Maketų objektų ir funkcijų kūrimas, siekiant izoliuoti kodo vienetus.
• Momentinių vaizdų testavimas (Snapshot Testing): Komponento ar funkcijos išvesties fiksavimas ir palyginimas su anksčiau išsaugotu momentiniu vaizdu.
• Kodo padengimas (Code Coverage): Procentinės dalies kodo, kurį apima jūsų testai, matavimas.
• Lygiagretus testų vykdymas: Testų vykdymas lygiagrečiai, siekiant sutrumpinti bendrą testavimo laiką.

Pavyzdys (Jest):

            // sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
            

              
                Copy
              
            
          

Mocha

Mocha yra lankstus ir išplečiamas testavimo karkasas, leidžiantis pasirinkti savo patvirtinimo (assertion) biblioteką (pvz., Chai, Assert) ir maketavimo (mocking) biblioteką (pvz., Sinon.JS). Tai suteikia daugiau kontrolės jūsų testavimo aplinkai.

• Lankstumas: Pasirinkite pageidaujamas patvirtinimo ir maketavimo bibliotekas.
• Išplečiamumas: Lengvai išplėskite Mocha su įskiepiais ir pasirinktiniais ataskaitų generatoriais.
• Asinchroninio kodo testavimas: Puikus palaikymas asinchroninio kodo testavimui.

Pavyzdys (Mocha su Chai):

            // sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// test/sum.test.js
const sum = require('../sum');
const chai = require('chai');
const expect = chai.expect;

describe('Sum', () => {
  it('should add 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).to.equal(3);
  });
});
            

              
                Copy
              
            
          

Jasmine

Jasmine yra elgsena paremtos plėtros (BDD) karkasas, kuris suteikia švarią ir išraiškingą sintaksę testams rašyti. Jis dažnai naudojamas AngularJS ir Angular programoms testuoti.

• BDD sintaksė: Aiški ir išraiškinga sintaksė testų atvejams apibrėžti.
• Integruoti patvirtinimai: Suteikia gausų integruotų patvirtinimo atitikmenų rinkinį.
• Šnipai (Spies): Palaikymas šnipų kūrimui funkcijų iškvietimams stebėti.

Pavyzdys (Jasmine):

            // sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.spec.js
describe('Sum', function() {
  it('should add 1 + 2 to equal 3', function() {
    expect(sum(1, 2)).toEqual(3);
  });
});
            

              
                Copy
              
            
          

Cypress

Cypress yra galingas „end-to-end“ (E2E) testavimo karkasas, orientuotas į kūrėjams draugišką patirtį. Jis leidžia rašyti testus, kurie sąveikauja su jūsų programa realioje naršyklės aplinkoje.

• Laiko kelionė (Time Travel): Derinkite savo testus grįždami laiku atgal, kad pamatytumėte savo programos būseną kiekviename žingsnyje.
• Perkrovimas realiuoju laiku: Testai automatiškai persikrauna, kai atliekate pakeitimus savo kode.
• Automatinis laukimas: Cypress automatiškai laukia, kol elementai taps matomi ir interaktyvūs.

Pavyzdys (Cypress):

            // cypress/integration/example.spec.js
describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io');

    cy.contains('type').click();

    // Should be on a new URL which
    // includes '/commands/actions'
    cy.url().should('include', '/commands/actions');

    // Get an input, type into it and verify
    // that the value has been updated
    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com');
  });
});
            

              
                Copy
              
            
          

Playwright

Playwright yra modernus „end-to-end“ testavimo karkasas, sukurtas „Microsoft“. Jis palaiko kelias naršykles („Chromium“, „Firefox“, „WebKit“) ir platformas („Windows“, „macOS“, „Linux“). Jis siūlo tokias funkcijas kaip automatinis laukimas, sekimas ir tinklo perėmimas patikimam ir stabiliam testavimui.

• Testavimas keliose naršyklėse: Palaiko testavimą keliose naršyklėse.
• Automatinis laukimas: Automatiškai laukia, kol elementai bus pasirengę, prieš su jais sąveikaujant.
• Sekimas (Tracing): Užfiksuokite išsamius savo testų pėdsakus derinimui.

Pavyzdys (Playwright):

            // playwright.config.js
module.exports = {
  use: {
    baseURL: 'https://example.com',
  },
};

// tests/example.spec.js
const { test, expect } = require('@playwright/test');

test('has title', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle(/Example Domain/);
});
            

              
                Copy
              
            
          

Testavimo infrastruktūros sąranka

Pasirinkus testavimo karkasą, reikia nustatyti savo testavimo infrastruktūrą. Paprastai tai apima šiuos veiksmus:

1. Įdiekite priklausomybes

Įdiekite reikiamas priklausomybes naudodami npm arba yarn:

            npm install --save-dev jest
yarn add --dev jest
            

              
                Copy
              
            
          

2. Konfigūruokite savo testavimo karkasą

Sukurkite konfigūracijos failą savo testavimo karkasui (pvz., jest.config.js, mocha.opts, cypress.json). Šis failas leidžia jums pritaikyti savo testavimo karkaso elgseną, pvz., nurodyti testų katalogus, ataskaitų generatorius ir visuotinius sąrankos failus.

Pavyzdys (jest.config.js):

            // jest.config.js
module.exports = {
  testEnvironment: 'node',
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)'],
  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
  moduleNameMapper: {
    '^@/(.*)$': '/src/$1',
  },
};
            

              
                Copy
              
            
          

3. Sukurkite testų failus

Sukurkite testų failus savo kodui. Šiuose failuose turėtų būti testų atvejai, kurie patikrina jūsų kodo funkcionalumą. Laikykitės nuoseklios testų failų pavadinimų suteikimo tvarkos (pvz., *.test.js, *.spec.js).

4. Paleiskite savo testus

Paleiskite savo testus naudodami komandinės eilutės sąsają, kurią teikia jūsų testavimo karkasas:

            npm test
yarn test
            

              
                Copy
              
            
          

Geriausios „JavaScript“ testavimo praktikos

Laikykitės šių geriausių praktikų, kad užtikrintumėte, jog jūsų testavimo infrastruktūra yra efektyvi ir prižiūrima:

• Rašykite testuojamą kodą: Projektuokite savo kodą taip, kad jį būtų lengva testuoti. Naudokite priklausomybių injekciją, venkite globalios būsenos ir rašykite mažas bei koncentruotas funkcijas.
• Rašykite aiškius ir glaustus testus: Padarykite savo testus lengvai suprantamus ir prižiūrimus. Naudokite aprašomuosius pavadinimus savo testų atvejams ir venkite sudėtingos logikos savo testuose.
• Testuokite kraštutinius atvejus ir klaidų sąlygas: Netestuokite tik „laimingo kelio“ scenarijaus. Būtinai testuokite kraštutinius atvejus, klaidų sąlygas ir ribines vertes.
• Išlaikykite greitus testus: Lėti testai gali žymiai sulėtinti jūsų kūrimo procesą. Optimizuokite savo testus, kad jie veiktų greitai, maketuodami išorines priklausomybes ir vengdami nereikalingų vėlavimų.
• Naudokite kodo padengimo įrankį: Kodo padengimo įrankiai padeda nustatyti jūsų kodo sritis, kurios nėra tinkamai išbandytos. Siekite didelio kodo padengimo, bet aklai nesivaikykite skaičių. Sutelkite dėmesį į prasmingų testų, kurie apima svarbų funkcionalumą, rašymą.
• Automatizuokite savo testus: Integruokite savo testus į savo CI/CD konvejerį, kad užtikrintumėte, jog jie bus automatiškai paleidžiami po kiekvieno kodo pakeitimo.

Integracija su nuolatine integracija (CI)

Nuolatinė integracija (CI) yra esminė modernios programinės įrangos kūrimo darbo eigos dalis. Integravus testus su CI sistema, galite automatiškai paleisti testus po kiekvieno kodo pakeitimo, gaudami nedelsiant grįžtamąjį ryšį apie savo kodo kokybę. Populiarios CI sistemos apima:

• Jenkins: Plačiai naudojamas atvirojo kodo CI serveris.
• GitHub Actions: Su GitHub integruota CI/CD platforma.
• Travis CI: Debesijos pagrindu veikianti CI paslauga.
• CircleCI: Kita populiari debesijos pagrindu veikianti CI paslauga.
• GitLab CI: CI/CD, integruota į GitLab.

Norėdami integruoti savo testus su CI sistema, paprastai turėsite sukurti konfigūracijos failą (pvz., .github/workflows/main.yml, .travis.yml, .gitlab-ci.yml), kuriame nurodomi veiksmai, kuriuos turi atlikti CI sistema, pvz., priklausomybių diegimas, testų paleidimas ir kodo padengimo duomenų rinkimas.

Pavyzdys (.github/workflows/main.yml):

            # .github/workflows/main.yml
name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 16.x, 18.x]

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - name: Install Dependencies
      run: npm ci
    - name: Run Tests
      run: npm test
    - name: Code Coverage
      run: npm run coverage
            

              
                Copy
              
            
          

Pažangios testavimo technikos

Be pagrindų, yra keletas pažangių testavimo technikų, kurios gali dar labiau pagerinti jūsų testavimo infrastruktūrą:

• Savybėmis pagrįstas testavimas (Property-Based Testing): Ši technika apima savybių, kurias jūsų kodas turėtų atitikti, apibrėžimą, o tada atsitiktinių įvesčių generavimą toms savybėms patikrinti.
• Mutacijų testavimas (Mutation Testing): Ši technika apima nedidelių pakeitimų (mutacijų) įvedimą į jūsų kodą, o tada jūsų testų paleidimą, siekiant patikrinti, ar jie aptinka mutacijas. Tai padeda užtikrinti, kad jūsų testai iš tikrųjų tikrina tai, ką manote, jog jie tikrina.
• Vizualinis testavimas (Visual Testing): Ši technika apima jūsų programos ekrano nuotraukų palyginimą su etaloniniais vaizdais, siekiant aptikti vizualines regresijas.

Internacionalizacijos (i18n) ir lokalizacijos (l10n) testavimas

Jei jūsų programa palaiko kelias kalbas ir regionus, būtina išbandyti jos internacionalizacijos (i18n) ir lokalizacijos (l10n) galimybes. Tai apima patikrinimą, ar jūsų programa:

• Teisingai rodo tekstą skirtingomis kalbomis.
• Tvarko skirtingus datos, laiko ir skaičių formatus.
• Prisitaiko prie skirtingų kultūrinių konvencijų.

Įrankiai, tokie kaip i18next, FormatJS ir LinguiJS, gali padėti su i18n ir l10n. Jūsų testai turėtų patikrinti, ar šie įrankiai yra teisingai integruoti ir ar jūsų programa elgiasi kaip tikėtasi skirtingose lokalėse.

Pavyzdžiui, galite turėti testus, kurie patikrina, ar datos rodomos teisingu formatu skirtingiems regionams:

            // Example using Moment.js
const moment = require('moment');

test('Date format should be correct for Germany', () => {
  moment.locale('de');
  const date = new Date(2023, 0, 1, 12, 0, 0);
  expect(moment(date).format('L')).toBe('01.01.2023');
});

test('Date format should be correct for the United States', () => {
  moment.locale('en-US');
  const date = new Date(2023, 0, 1, 12, 0, 0);
  expect(moment(date).format('L')).toBe('01/01/2023');
});
            

              
                Copy
              
            
          

Prieinamumo testavimas

Užtikrinti, kad jūsų programa būtų prieinama vartotojams su negalia, yra labai svarbu. Prieinamumo testavimas apima patikrinimą, ar jūsų programa atitinka prieinamumo standartus, tokius kaip WCAG (Web Content Accessibility Guidelines).

Įrankiai, tokie kaip axe-core, Lighthouse ir Pa11y, gali padėti automatizuoti prieinamumo testavimą. Jūsų testai turėtų patikrinti, ar jūsų programa:

• Pateikia tinkamą alternatyvų tekstą paveikslėliams.
• Naudoja semantinius HTML elementus.
• Turi pakankamą spalvų kontrastą.
• Yra naviguojama naudojant klaviatūrą.

Pavyzdžiui, galite naudoti axe-core savo Cypress testuose, kad patikrintumėte prieinamumo pažeidimus:

            // cypress/integration/accessibility.spec.js
import 'cypress-axe';

describe('Accessibility check', () => {
  it('Checks for accessibility violations', () => {
    cy.visit('https://example.com');
    cy.injectAxe();
    cy.checkA11y(); // Checks the entire page
  });
});
            

              
                Copy
              
            
          

Našumo testavimas

Našumo testavimas užtikrina, kad jūsų programa yra reaguojanti ir efektyvi. Tai gali apimti:

• Apkrovos testavimas (Load Testing): Didelio skaičiaus vienu metu prisijungusių vartotojų imitavimas, siekiant pamatyti, kaip jūsų programa veikia esant didelei apkrovai.
• Streso testavimas (Stress Testing): Jūsų programos stūmimas už jos ribų, siekiant nustatyti lūžio taškus.
• Našumo profiliavimas (Performance Profiling): Našumo kliūčių nustatymas jūsų kode.

Įrankiai, tokie kaip Lighthouse, WebPageTest ir k6, gali padėti atlikti našumo testavimą. Jūsų testai turėtų patikrinti, ar jūsų programa greitai įsikrauna, greitai reaguoja į vartotojo sąveikas ir efektyviai plečiasi.

Mobiliųjų įrenginių testavimas

Jei jūsų programa skirta mobiliesiems įrenginiams, turėsite atlikti mobiliųjų įrenginių testavimą. Tai apima jūsų programos testavimą skirtinguose mobiliuosiuose įrenginiuose ir emuliatoriuose, siekiant užtikrinti, kad ji tinkamai veiktų įvairių dydžių ir raiškos ekranuose.

Įrankiai, tokie kaip Appium ir BrowserStack, gali padėti atlikti mobiliųjų įrenginių testavimą. Jūsų testai turėtų patikrinti, ar jūsų programa:

• Teisingai reaguoja į lietimo įvykius.
• Prisitaiko prie skirtingų ekrano orientacijų.
• Efektyviai naudoja išteklius mobiliuosiuose įrenginiuose.

Saugumo testavimas

Saugumo testavimas yra labai svarbus siekiant apsaugoti jūsų programą ir vartotojų duomenis nuo pažeidžiamumų. Tai apima jūsų programos testavimą dėl dažniausiai pasitaikančių saugumo trūkumų, tokių kaip:

• Tarpvietinis scenarijų rašymas (XSS): Kenkėjiškų scenarijų įterpimas į jūsų programą.
• SQL injekcija: Pažeidžiamumų išnaudojimas jūsų duomenų bazės užklausose.
• Tarpvietinė užklausų klastotė (CSRF): Vartotojų privertimas atlikti nenumatytus veiksmus.

Įrankiai, tokie kaip OWASP ZAP ir Snyk, gali padėti atlikti saugumo testavimą. Jūsų testai turėtų patikrinti, ar jūsų programa yra atspari dažniausioms saugumo atakoms.

Išvada

Patikimos „JavaScript“ testavimo infrastruktūros diegimas yra esminė investicija į jūsų kodo kokybę ir patikimumą. Laikydamiesi šiame vadove pateiktų gairių ir geriausių praktikų, galite sukurti testavimo infrastruktūrą, kuri leis jums su pasitikėjimu kurti aukštos kokybės „JavaScript“ programas. Nepamirškite pasirinkti tinkamą karkasą pagal savo poreikius, rašyti aiškius ir glaustus testus, integruoti savo testus su CI sistema ir nuolat tobulinti savo testavimo procesą. Investicijos į išsamią testavimo infrastruktūrą atsipirks ilgalaikėje perspektyvoje, sumažinant klaidų skaičių, gerinant kodo kokybę ir pagreitinant kūrimo ciklus.